<template>
    <show-modal
        :title="title"
        :loading="loading"
        :width="width"
        cancelText="确定"
        submitText="生成外链"
        @cancel="cancel"
        @submit="submit"
    >
        <div class="resume_block">
            <div class="block_header flex-row" @click="showBlock('isBasicInfo')">
                <a-icon class="activeItem" v-if="isBasicInfo" type="right-circle" theme="filled" />
                <a-icon class="activeItem" v-else type="down-circle" theme="filled" />
                <span class="title">基本信息</span>
            </div>
            <div class="resume_box flex-row" v-if="isBasicInfo">
                <div class="resume_avatar"><img class="avatar" :src="info.imageUrl" /></div>
                <div class="resume_info flex-column flex-item">
                    <a-row :gutter="4">
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">姓名：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.name}}</template>
                                    {{info.name}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">联系方式：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.contact || '无'}}</template>
                                    {{info.contact || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">入职时间：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.entryTime}}</template>
                                    {{info.entryTime}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">身份证号码：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.idNumber}}</template>
                                    {{dealIdCard(info.idNumber)}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">性别：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.sex}}</template>
                                    {{info.sex}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">紧急联系人：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.emergency_contact || '无'}}</template>
                                    {{info.emergency_contact || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">在职状态：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.sex=='A'?'在职':'离职'}}</template>
                                    {{info.sex=='A'?'在职':'离职'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">备注：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.comments}}</template>
                                    {{info.comments}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">年龄：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.age}}</template>
                                    {{info.age}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">当前岗位：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.position || '无'}}</template>
                                    {{info.position || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <!-- <a-col :span="6" class="resume_item flex-row">
                            <span class="label">工种：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title"><field-tag :data="workTypes" :value="info.workType" type="value" showType="label"></field-tag></template>
                                    <list-status :data="workTypes" :value="info.workType" :dot="false"></list-status>
                                </a-tooltip>
                            </span>
                        </a-col> -->
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">籍贯：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.nativeLocation || '无'}}</template>
                                    {{info.nativeLocation || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">通讯地址：</span>
                            <span class="desc">
                                <a-tooltip placement="top">
                                    <template slot="title">{{info.address || '无'}}</template>
                                    {{info.address || '无'}}
                                </a-tooltip>
                            </span>
                        </a-col>
                        <a-col :span="6" class="resume_item flex-row">
                            <span class="label">表现评级：</span>
                            <span class="desc">
                                <a-tooltip placement="top" v-if="info.level">
                                    <template slot="title"><list-status :data="jobLevels" :value="info.level" :dot="false"></list-status></template>
                                    <list-status :data="jobLevels" :value="info.level" :dot="false"></list-status>
                                </a-tooltip>
                            </span>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </div>

        <div class="resume_block">
            <div class="block_header flex-row" @click="showBlock('isCertification')">
                <a-icon class="activeItem" v-if="isCertification" type="right-circle" theme="filled" />
                <a-icon class="activeItem" v-else type="down-circle" theme="filled" />
                <span class="title">相关证书</span>
            </div>
            <a-empty v-if="!info.certificate"/>
            <div class="certification_box flex-row" v-if="isCertification && info.certificate">
                <div class="side" @click="slidePrev"><a-icon type="caret-left" /></div>
                <div class="swiper">
                    <slider ref="slider" :options="options">
                        <slideritem
                            v-for="(item, index) in info.certificate.split(',')"
                            :key="index"
                            :style="{ background: '#F0F0F0', width: '23.5%',height:'240px', 'margin-right': '2%' }"
                            >
                            <img :src="item" class="certificate"/>
                            </slideritem
                        >
                        <!-- Customizable loading -->
                        <div slot="loading">loading...</div>
                    </slider>
                </div>
                <div class="side" @click="slideNext"><a-icon type="caret-right" /></div>
            </div>
        </div>

        <div class="resume_block">
            <div class="block_header flex-row" @click="showBlock('isResume')">
                <a-icon class="activeItem" v-if="isResume" type="right-circle" theme="filled" />
                <a-icon class="activeItem" v-else type="down-circle" theme="filled" />
                <span class="title">大事件</span>
            </div>
            <scroll-bar class="resume_tree flex-row" v-if="isResume && info.sysWorkerResume">
                <div :class="['resume_node flex-column',info.sysWorkerResume.length==1 && 'only_node']" v-for="(work,index) in info.sysWorkerResume" :key="work.id">
                    <p class="detail">
                        <a-tooltip placement="top">
                            <template slot="title">{{work.event}}</template>
                            {{work.event}}
                        </a-tooltip>
                    </p>
                    <span :class="['dot',(index==0 || index==(info.sysWorkerResume.length-1)) && 'active_bg']"></span>
                    <span class="time">{{work.createTime}}</span>
                </div>
            </scroll-bar>
        </div>
    </show-modal>
</template>
<script>
import { workTypes, jobStatus, jobLevels } from '@/views/staff/dictionary';
import {idCard} from '@/utils'
import { slider, slideritem } from 'vue-concise-slider';
import {getResume} from '@/api/staff/labour';
export default {
    name: 'ResumeInfo',
    props: {
        form: {
            type: Object,
            default: () => {}
        }
    },
    components: {
        slider,
        slideritem
    },
    data() {
        return {
            workTypes, jobStatus, jobLevels,
            title: '人员履历',
            loading: false,
            width: '100%',
            options: {
                currentPage: 0,
                tracking: false,
                thresholdDistance: 100,
                thresholdTime: 300,
                infinite: 4,
                slidesToScroll: 4,
                loop: true,
                pagination: false,
                nested: false,
                // slidesToScroll: 1
            },
            info:{},
            isBasicInfo:true,
            isCertification:true,
            isResume:true
        };
    },
    created() {
        this.width = window.innerWidth - 170 + 'px';
        let {id} = this.form;
        this.getResumeInfo(id);
    },
    methods: {
        showBlock(type){
            // console.log(type)
            // this[type] = !this[type]
        },
        dealIdCard(number){
            if(!number) return ''
            return idCard(number)
        },
        slideNext() {
            let certificate = this.info.certificate.split(',')
            if(certificate.length<=4){
                return false;
            }
            this.$refs.slider.$emit('slideNext');
        },
        slidePrev(){
            let certificate = this.info.certificate.split(',')
            if(certificate.length<=4){
                return false;
            }
            this.$refs.slider.$emit('slidePre');
        },
        submit() {
            this.$emit('cancel');
        },
        cancel() {
            this.$emit('cancel');
        },
        async getResumeInfo(id){
            this.loading = true;
            try{
                let res = await getResume(id);
                this.info = res.data;
            }finally{
                this.loading = false;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.certificate{
    padding: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.resume_block {
    margin-bottom: 30px;
    padding: 10px;
    background: #fafafa;
    .block_header {
        align-items: center;
        font-size: 14px;
        .activeItem {
            font-size: 16px;
        }
        .title {
            margin-left: 10px;
            color: #333;
        }
    }
    .resume_box {
        margin: 10px;
        flex: 1;
        .resume_avatar {
            flex-shrink: 0;
            margin-right: 20px;
            width: 190px;
            height: 210px;
            background: #333;
            .avatar{
                width: 100%;
                height: 100%;
            }
        }
        .resume_info {
            .resume_item {
                margin-bottom: 30px;
            }
            .desc {
                flex: 1;
                width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .certification_box{
        margin: 20px 0;
        align-items: center;
        .side{
            font-size: 30px;
            color: #011D3F;
            cursor: pointer;
        }
    }
    .resume_tree {
        flex: 1;
        margin: 40px 20px;
        ::v-deep .scrollbar__wrap {
            width: 100%;
            margin-bottom: 20px !important;
            overflow-y: hidden;
            .scrollbar__view {
                display: flex;
            }
        }
        .resume_node {
            position: relative;
            padding: 0 20px;
            flex: 1;
            min-width: 200px;
            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 33px;
                right: 0;
                height: 2px;
                background: #000;
                z-index: 0;
            }
            &:last-child:after {
                left: 0;
                width: 40px;
                right: auto;
            }
            &:nth-child(1)::after {
                left: 40px;
            }
            &.only_node::after{
                width: 0;
            }
            .detail {
                height: 40px;
                font-size: 14px;
                color: #000;
                overflow: hidden; //超出文本隐藏
                text-overflow: ellipsis; //溢出显示省略号
                display: -webkit-box; //设置为弹性盒子
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; //只显示两行
            }
            .dot {
                position: relative;
                margin-left: 20px;
                margin-top: 24px;
                width: 16px;
                height: 16px;
                border-radius: 100%;
                background-color: #fff;
                border: 2px solid #000000;
                z-index: 1;
            }
            .time {
                margin-top: 8px;
                font-size: 12px;
                color: #666;
            }
        }
    }
    .swiper{
        flex: 1;
        width: 0;
    }
}
</style>
